<template>
    <div class="book">
        <header>
            <!-- <img src="@/assets/mhdlogo.png" alt="" /> -->
            漫画
        </header>
        <div class="bookbox" v-if="state">
            <ul>
                <li @click="cartoon(i.bookId)" v-for="(i, ind) in bookArr" :key="ind">
                    <div class="img">
                        <img :src="i.bookimg" alt="" />
                    </div>
                    <span class="name">{{ i.bookname }}</span>
                    <span class="state">{{ i.finish == 1 ? "[完结]" : "" }} {{ i.finish == 1 ? "共" + i.last + "话" : "更新至" + i.last + "话" }}</span>
                </li>
            </ul>
        </div>
        <div v-if="state == false">
            <van-empty description="书架为空" />
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            bookArr: [],
            state: false,
        };
    },
    methods: {
        cartoon(bookId) {
            this.$router.push({ name: "detailpage", params: { id: bookId } });

            // this.$router.push({ path: "/cartooncontent/" + i, query: { detail: bookId, name: name, id: i, arr: JSON.stringify(arr) } });
        },

        getBook() {
            let token = localStorage.getItem("token");
            if (token == null) {
                return;
            }
            let arr = JSON.parse(localStorage.getItem(token));
            // if (arr == null) {
            //     return;
            // }
            // let box = arr.filter((data) => {
            //     return data.isCollect;
            // });
            // // console.log(box);
            // let newArr = [];
            // for (let i = 0; i < box.length; i++) {
            //     let a = newArr.find((item) => {
            //         return item.id == box[i].id;
            //     });
            //     if (a) {
            //         // return;
            //     } else {
            //         newArr.push(
            //             box.find((item) => {
            //                 return item.id == box[i].id;
            //             })
            //         );
            //     }
            // }

            // // console.log(newArr);
            // localStorage.setItem("key", JSON.stringify(newArr));
            this.bookArr = arr;
        },
        init() {
            let token = localStorage.getItem("token");
            let content = JSON.parse(localStorage.getItem(token));
            if (content == null) {
                this.state = false;
                return;
            }
            this.state = true;
        },
    },
    created() {
        this.init();
        this.getBook();
    },
    beforeRouteEnter(to, from, next) {
        next((vm) => {
            // console.log(vm);
            if (localStorage.getItem("token") == null) {
                vm.$router.push({ path: "/login/islogin" });
            }
        });
    },
};
</script>

<style lang="scss" scoped>
.book {
    header {
        height: 2.5rem;
        color: #858585;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(8deg, rgb(255 255 255 / 90%), rgb(255 195 188 / 60%));
        text-align: center;
        box-shadow: 0px 0px 2px #c4c4c4;
        img {
            width: 20px;
            height: 20px;
        }
    }
    .bookbox {
        padding: 0 0.9375rem;
        ul {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
        }
        li {
            margin-top: 1.125rem;
            margin-right: 0.3125rem;
            width: 6.875rem;
        }
        .img {
            border-radius: 5px;
            width: 110px;
            height: 140px;
            overflow: hidden;
            img {
                height: 100%;
                width: 110px;
            }
        }
        span {
            display: block;
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .name {
            color: #333333;
            font-family: "宋体";
            margin-top: 0.1875rem;
            font-size: 13px;
        }
        .state {
            color: #b6b6b6;
            margin-top: 0.3125rem;
            font-size: 0.625rem;
        }
    }
}
</style>
